<template>
    <view class="nav-section">
        <scroll-view class="role-buttons" scroll-x :show-scrollbar="false">
            <view class="nav-buttons-container">
                <view v-for="item in spliceNavItems" :key="item.value" class="nav-button"
                    :class="{ active: selectedValue === item.value }" @click="handleNavClick(item)">
                    {{ item.label }}
                </view>
            </view>
        </scroll-view>
        <view class="arrow-button" @click="handleArrowClick">
            <up-icon name="arrow-down" size="16" color="#666"></up-icon>
        </view>
    </view>
    <!-- 新增 -->
    <up-popup :show="showMoreNav" mode="bottom" :round="20" :closeable="true" @close="showMoreNav = false">
        <view class="more-nav-popup">
            <view class="popup-title">{{ popupTitle }}</view>
            <view class="more-nav-grid">
                <view v-for="(item, index) in navItems" :key="item.value" class="more-nav-item"
                    :class="{ active: selectedValue === item.value }" @click="handleChangeNavItem(item)">
                    <text class="more-nav-text">{{ item.label }}</text>
                </view>
            </view>
        </view>
    </up-popup>
</template>

<script setup>
import { ref, computed } from "vue";

const selectedValue = defineModel("modelValue", { type: String });
const showMoreNav = ref(false);

// 定义组件属性
const props = defineProps({
    spliceLen: {
        type: Number,
        default: 5,
    },
    // 导航项数据
    items: {
        type: Array,
        default: () => [],
    },
    // 当前选中的值
    modelValue: {
        type: [String, Number],
        default: "",
    },
    popupTitle: {
        type: String,
        default: "更多",
    },
});

// 定义组件事件
const emit = defineEmits([
    "change", // 选中变化
    "arrow-click", // 箭头点击
]);

// 计算属性：处理导航项数据
const navItems = computed(() => {
    return props.items.map((item) => {
        if (typeof item === "string" || typeof item === "number") {
            return { label: item, value: item };
        }
        return item;
    });
});
const spliceNavItems = computed(() => {
    return navItems.value.slice(0, props.spliceLen);
});

// 处理导航点击
const handleNavClick = (item) => {
    selectedValue.value = item.value;
    emit("change", item);
};

// 处理箭头点击
const handleArrowClick = () => {
    showMoreNav.value = true;
    emit("arrow-click");
};

// 处理选择更多导航项
const handleChangeNavItem = (item) => {
    selectedValue.value = item.value;
    showMoreNav.value = false;
    emit("change", item);
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

// 横向滚动导航按钮样式
.nav-section {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
}

.role-buttons {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

.nav-buttons-container {
    display: flex;
    align-items: center;
    gap: 20rpx;
    min-width: 100%;
}

.nav-button {
    background-color: #efefef;
    border: none;
    border-radius: 40rpx;
    padding: 16rpx 32rpx;
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;

    &.active {
        background-color: $tabbar-text-color;
        color: #fff;
    }
}

.arrow-button {
    background-color: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 20rpx;
}

// 更多角色弹窗样式
.more-nav-popup {
    padding: 40rpx 30rpx;
    background-color: #fff;
}

.popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 40rpx;
}

.more-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
}

.more-nav-item {
    background-color: #f5f5f5;
    border-radius: 20rpx;
    padding: 24rpx 16rpx;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;

    &.active {
        background-color: #f54f24;
        color: #fff;

        .more-nav-text {
            color: #fff !important;
        }
    }

    &:active {
        transform: scale(0.95);
        background-color: #e0e0e0;
    }
}

.more-nav-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
